<template>
    <div>
        <h3>修改公告</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right"><b>*</b>标题:</td>
                    <td>
                        <input type="text" v-model="querinfo.Title">
                    </td>
                </tr>

                <tr>
                    <td align="right"><b>*</b>公告内容:</td>
                    <td>
                        <textarea cols="30" rows="5" v-model="querinfo.Desc"></textarea>
                    </td>
                </tr>

                <tr>
                    <td align="right"><b>*</b>公告照片:</td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="querinfo.Photo" width="150" height="100">
                    </td>
                </tr>

                <tr>
                    <td align="right"><b>*</b>状态:</td>
                    <td>
                        <input type="radio" :value="1" v-model="querinfo.State">显示
                        <input type="radio" :value="0" v-model="querinfo.State">隐藏
                    </td>
                </tr>

                <tr>
                    <td align="right"><b>*</b>类型:</td>
                    <td>
                        <select v-model="querinfo.OffiecTypeId">
                            <option value="">请选择</option>
                            <option :value="item.Id" v-for="item in data.listtype">{{ item.TypeName }}</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td align="right"><b>*</b></td>
                    <td>
                        <input type="button" value="修改" class="btn btn-primary" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref,reactive,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const route=useRoute();
const router=useRouter();

let querinfo:any=reactive({
"Id":route.query.id,
  "Title": "",
  "Desc": "",
  "Photo": "",
  "State": "",
  "OffiecTypeId": "",
})


let data:any=reactive({
    listtype:[]
})

onMounted(()=>{
    getType();
    detail();
})



const detail=()=>{
    axios({
        method:"get",
        url:"/api/Month/DetailOffice",
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        Object.assign(querinfo,res.data)
    })
    .catch(err=>{
        console.log(err)
    })
}


const ok=()=>{
    if(querinfo.Title==""){
        alert('标题不能为空');
        return;
    }
    let reg=/^[\u4e00-\u9fa5]{1,20}$/
    if(!reg.test(querinfo.Title)){
        alert('标题只能是20以内汉字')
        return;
    }
    if(querinfo.Desc==""){
        alert('公告内容不能为空');
        return;
    }
    if(querinfo.Desc.length>50){
        alert('公告内容不大于50个字')
        return;
    }
    if(querinfo.Photo==""){
        alert('照片不能为空');
        return;
    }
    if(querinfo.State===""){
        alert('状态不能为空');
        return;
    }
    if(querinfo.OffiecTypeId==""){
        alert('类型不能为空');
        return;
    }
    axios({
        method:"post",
        url:"/api/Month/UpdOffice",
        data:querinfo
    })
    .then(res=>{
        if(res.data==-1){
            alert('标题重复')
        }
        else if(res.data>0){
            alert('修改成功')
            router.push("/officeshow")
        }
    })
}

const img=(e:any)=>{
    var d=e.target.files[0];
    var s=new FormData();
    s.append('file',d);
    axios({
        method:"post",
        url:"/api/Month/Img",
        data:s
    })
    .then(res=>{
        if(res.data=="图片格式错误"){
            alert('图片格式错误')
        }
        else if(res.data=="超过2MB"){
            alert('超过2MB')
        }
        else{
            querinfo.Photo=res.data
        }
    })
}

const getType=()=>{
    axios({
        method:"get",
        url:"/api/Month/GetOfficeType"
    })
    .then(res=>{
        data.listtype=res.data
    })
}


</script>




<style scoped>
b{
    color: red;
}
</style>